<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">
        <title>天天美印</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="hammer.min.js"></script>
        <script type="text/javascript" src="bootstrap.min.js"></script>
        <link type="text/css" rel="stylesheet" href="common.css" />  
        <link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
        <style>
                a{
                    text-decoration: none;
                }
                ul,li{
                    list-style: none;
                    padding:none;
                    margin:0;
                }
        		#main{
        			background-color:#EEEEEE;
        		}
        		.logistics-company{
        			width:100%;
        			border-top:1px solid #E5E5E5;
        			border-bottom:1px solid #E5E5E5;
        			background:#fff;
        			position:relative;
        		}
        		.logistics-company img,.logistics-msg img{
        			width:18%;
        			margin:1rem 0.5rem;
        			border: 1px solid #E5E5E5;
        		}
        		.logistics-company div{
        			position:absolute;
        			width: 76%;
        			float:right;
        			top:1rem;
        			left:22%;
        			
        		}
        		.logistics-company div span#status{
        			/*font-size:1.2rem;*/
                    font-size: 1.3rem;
        			color:#4e4e4e;
        		}
        		.logistics-company div span#status a{
        			color:#11CD6E;
        			font-size: 1.2rem;
        			padding-left:5px;
        		}
        		.logistics-company div span{
        			display:block;
        			/*padding-bottom:5px;*/
        		}
        		.logistics-company div span:nth-of-type(2){
        			position:absolute;
        			bottom:35%;
        		}
        		.logistics-company div span:last-child{
        			position:absolute;
        			bottom:0;
        		}
        		.logistics-company div span,.logistics-company div span a{
        			font-size: 1rem;
        			color:#AAAAAA;
        		}
        		p{
        			margin:1rem 0 0 0.5rem;
        			padding-bottom:1rem;
        			font-size: 1.3rem;
        			border-bottom:1px solid #E5E5E5;
        		}
        		.logistics-msg{
        			border-top:1px solid #E5E5E5;
        			border-bottom:1px solid #E5E5E5;
        			margin-top:10px;
        			background:#fff;
        			position:relative;
        		}
        		.products-msg{
        			width:50%;
        			position:absolute;
        			top: 4.8rem;
        			left:22%;
        			font-size: 1.2rem;    			
        		}
        		.products-msg span:last-child{
        			font-size:1rem;
        			color:#AAAAAA;
        			position:absolute;
        			bottom:0;
        		}
        		.products-msg span:last-child a{
        			font-size:1rem;
        			color:#AAAAAA;
        		}
        		.products-price{
        			position:absolute;
        			right:0.5rem;
        			top: 4.8rem;
        			width:25%;
        			text-align:right;
        		}
        		.products-price span{
        			display:block;
        		}
        		.products-price span:first-child{
        			font-size:1.1rem;
        			font-weight:bold;
        		}
        		.products-price span:last-child{
        			color:#AAAAAA;
        		}
        		.logistics-following{
        			border-top:1px solid #E5E5E5;
        			border-bottom:1px solid #E5E5E5;
        			background:#fff;
        			margin-top:10px;
        		}
        		.logistics-following ul li{
        			border-bottom:1px solid #E5E5E5;
        			margin:0 0.5rem 0 15%;
        			padding:10px 0;
        		}
        		.logistics-following ul li:nth-of-type(1) .progress-line a{
        			position:absolute;
        			height:11px;
        			width:11px;
        			border-radius:100%;
        			background:#11CD6E;
        			top:-5px;
        			left:-6px;
        			border: 1px solid #aef0cf;
        			
        		}
        		.logistics-following ul li:nth-of-type(1) .progress-content,.logistics-following ul li:nth-of-type(1) span,.logistics-following ul li:nth-of-type(1) span:first-child{
        			color:#11CD6E;
        		}
        		.progress-line{
        			position:absolute;
        			width:7.5%;
        			height:30px;
        			left:7.5%;
        			border-left:1px solid #A1A1A1;
        		}
        		.progress-line a{
        			position:absolute;
        			height:9px;
        			width:9px;
        			border-radius:100%;
        			background:#A1A1A1;
        			top:-4px;
        			left:-5px;
        		}
        		.progress-content{
        			font-size: 1.2rem;
        			color:#888888;
        			/*margin-bottom:0.5rem;*/
        		}
        		.logistics-following ul li span{
        			color:#888888;
        			font-size: 1.1rem;
        			margin-right:0.5rem;
        		}
        		.logistics-following ul li span:first-child{
        			color:#888888;
        			font-size: 1.1rem;
        			margin-right:0.5rem;
        		}
        		.logistics-following ul li:last-child{
        			border-bottom:none;
        			
        		}
        </style>
	</head>
	<body>
		<div id="wrap">  
        	<div id="main">	
    			<div class="logistics-company">
<!--    				<img src="headImg.png">-->
<!--    				<div>-->
<!--    					<span id="status">物流状态<a></a></span>-->
<!--    					<span id="tool">物流跟踪：<a></a></span>-->
<!--    					<span id="toolid">运单编号：<a></a></span>-->
<!--    				</div>-->
    			</div>
    			<!--<div class="logistics-msg">
    				<p>物品信息</p>
    				<!--<img src="../../image/qr-code.png">
    				<div class="products-msg">
    					<span>QIE/企鹅电子称提忠臣呢过家用人体秤精准承认健康秤智能仪婴儿称重计</span>
    					<span>颜色分类：<a>绿色</a></span>
    				</div>
    				<div class="products-price">
    					<span>￥<a>99.00</a></span>
    					<span>×1</span>
    				</div>
    			</div>-->
    			<div class="logistics-following">
    				<p>物流跟踪</p>
    				<ul>
    					<li>
    						<div class="progress-line"><a></a></div>
    						<div class="progress-content"></div>
    						<div>
    							<span></span>
    							<span></span>
    						</div>			
    					</li>
    					
    				</ul>
    			</div>
        	</div>

    </div>
	</body>

	<script type="text/javascript">

		$(function(){
			var orderid = api.getOrderID();
			$.ajax({
                url:'http://ttmy.len.so/app/order/wuliu/orderid/'+orderid,
                type: 'get',
			    dataType: 'jsonp',
                success:function(ret,err){
				    
                    console.log(ret);
                	if(ret.status==1){
                		//var arr = ret.data.result[0].context.split(" ");
                        var arr = ret.info.data;

                        //console.log(arr[0]);return;
                        var img = '<img src="http://7xqkvn.com1.z0.glb.clouddn.com/'+ret.info.cover+'?imageView2/2/w/100"/>';
                   
                        $(".logistics-company").append(img);
                   
                   
                   var statustr;
                		
                		switch(ret.info.status){
                   case '1':statustr='正常';break;//$(".logistics-company").append(img);break;//$("#status a").html('正常');break;
                            case '2':statustr='派送中';break;//$("#status a").html('派送中');break;
                            case '3':statustr='已签收';break;//$("#status a").html('已签收');break;
                            default:break;
                        }
                   
                   var divstr = '<div>'+
                   '<span id="status">'+statustr+'<a></a></span>'+
                   '<span id="tool">物流跟踪：<a>'+ret.info.expTextName+'</a></span>'+
                   '<span id="toolid">运单编号：<a>'+ret.info.mailNo+'</a></span>'+
                   '</div>';
                    $(".logistics-company").append(divstr);
                   
                		//$("#tool a").html(ret.info.expTextName);
                		//$("#toolid a").html(ret.info.mailNo);
                        //$("img").attr("src","http://7xluzj.com1.z0.glb.clouddn.com/"+ret.info.cover+"?imageView2/2/w/100");
                		var tmp='';
                		
                		for(var i=arr.length-1;i>=0;i--){
                			//alert(i)
                            tmp+='<li>'+
                                '<div class="progress-line"><a></a></div>'+
        						'<div class="progress-content">'+arr[i].context+'</div>'+
        						'<div>'+
        							'<span>'+arr[i].time+'</span>'+
        							//'<span>'+res.time.substring(11)+'</span>'+
        						'</div>'+			
        					'</li>'
                		}
                		
                		$(".logistics-following ul").html(tmp);

                        var picWid=$("img").width();
                        $("img").css("height",picWid);
                        $(".logistics-company div").css("height",picWid);
                        $(".products-msg").css("height",picWid);

                        var len=$(".logistics-following ul li").length;
                        $(".logistics-following ul li").each(function(i){
                            var progressLine=$(this).height();
                            var noProgress=0;
                            if(i===len-1){
                                noProgress=progressLine+11;
                            }else{
                                noProgress=progressLine+21;
                            }
                            $(this).find(".progress-line").css("height",noProgress);

                        });
                	}else{
                		$(".logistics-following ul").html('<li>暂无相关物流信息</li>');
                	}
                }
            })
		})
		
	</script>
</html>
